<template>
  <view class="mcht-container" v-if="mchntList && mchntList.length > 0">
    <view class="mcht-container-title">
      <text class="title-left">适用门店</text>
      <view class="title-right">
        <navigator :url="'/pages/coupon/couponMerchants/couponMerchants?couponId=' + couponId + '&&actId=' + actId"
          hover-class="none">当前支持{{ allSize }}家</navigator>
        <image class="icon-arrow" src="/static/image/arrow_right.png"></image>
      </view>
    </view>

    <view class="mcht-list">
      <view class="mcht-item" v-for="(item, index) in mchntList" :key="index">
        <view class="mcht-item-left">
          <view class="mcht-left-line1">{{ item.mchntName }}</view>
          <view class="mcht-left-line2">{{ item.addr }}</view>
        </view>

        <view class="mcht-item-right">
          <block v-if="item.distance">
            <view class="mcht-right-line1" :data-item="item" @tap.stop.prevent="openLocation">
              <image class="icon-map" src="/static/image/dialog_ic_map@2x.png"></image>
              <text>导航</text>
            </view>
            <view class="mcht-right-line2">
              <text>距你{{ item.distance }}公里</text>
            </view>
          </block>
          <block v-else>
            <view class="mcht-right-line2">
              <text>暂无位置信息</text>
            </view>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    http
  } from '@/utils/commonRequest.js'; // 局部引入
  const app = getApp();

  const util = require('../../utils/util.js');

  export default {
    data() {
      return {
        mchntList: [],
        allSize: 0
      };
    },
    /**
     * 组件的属性列表
     */
    props: {
      couponId: {
        type: String,
        default: ''
      },
      actId: {
        type: String,
        default: ''
      }
    },
    /**
     * 组件的方法列表
     */
    methods: {
      queryMchtList: function() {
        let that = this;
        let params = {
          pageNum: 1,
          pageSize: 10,
          couponId: that.couponId,
          actId: that.actId
        };
        http.get('/zsnshMerchant/listCouponMerchants', {params:params}).then((res) => {
            if (200 == res.data.code) {
              console.log(res);
              let mchntList = res.data.result.bemList && res.data.result.bemList.list ? res.data.result.bemList.list : [];
              let allSize = res.data.result.AllSize ? res.data.result.AllSize : 0;
              let userLat = app.globalData.currLatitude;
              let userLng = app.globalData.currLongitude;

              if (!util.isEmpty(mchntList) && mchntList.length > 0) {
                for (let i = 0; i < mchntList.length; i++) {
                  if (util.isEmpty(mchntList[i].lat) || util.isEmpty(mchntList[i].lng) || util.isEmpty(userLng) ||
                    util.isEmpty(userLat)) {} else {
                    var distance = util.getDistance(mchntList[i].lat, mchntList[i].lng, userLat, userLng);
                    mchntList[i].distance = distance;
                  }
                }
              }

              if (mchntList && mchntList.length > 3) {
                mchntList.length = 3;
              }
              that.mchntList = mchntList
              that.allSize = allSize
            } else {
              console.log('组件：适用商户查询失败,', res);
            }
          })
          .catch((res) => {
            console.log('组件：适用商户查询异常', res);
          });
      },
      openLocation: function(e) {
        let item = e.currentTarget.dataset.item;
        let addrInfo = {
          address: item.addr ? item.addr : '',
          name: item.merchantName ? item.merchantName : '',
          lat: item.lat,
          lng: item.lng
        };
        util.openLocation(addrInfo, app.globalData.currLatitude, app.globalData.currLongitude);
      }
    },
    watch: {
      couponId: {
        handler: function(newVal) {
          // console.log("couponId:", newVal)
          if (!util.isEmpty(newVal)) {
            this.queryMchtList();
          }
        },

        immediate: true
      },

      actId: {
        handler: function(newVal) {
          console.log('actId:', newVal);

          if (!util.isEmpty(newVal)) {
            this.queryMchtList();
          }
        },

        immediate: true
      }
    }
  };
</script>
<style>
  .mcht-container {
    width: 686rpx;
    background: #ffffff;
    margin: 0 32rpx 32rpx;
    padding: 0 24rpx;
    box-shadow: 0px 20px 60px 0px rgba(112, 136, 210, 0.1);
    border-radius: 16px;
  }

  .mcht-container-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 92rpx;
    border-bottom: 1px solid #f4f5f7;
  }

  .title-left {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .title-right {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #666;
    font-weight: bold;
  }

  .icon-arrow {
    width: 24rpx;
    height: 24rpx;
    margin-left: 16rpx;
  }

  .mcht-list {
    padding: 8rpx 0 50rpx;
  }

  .mcht-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24rpx;
  }

  .mcht-item-left {
    flex-shrink: 0;
    width: 440rpx;
  }

  .mcht-left-line1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 28rpx;
    font-weight: bold;
    color: #000;
    line-height: 40rpx;
  }

  .mcht-left-line2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-top: 8rpx;
    font-size: 24rpx;
    color: #999;
    line-height: 34rpx;
  }

  .mcht-item-right {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .mcht-right-line1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 102rpx;
    height: 52rpx;
    font-size: 22rpx;
    color: #666;
    background: #f6f6f6;
    border-radius: 16rpx;
  }

  .icon-map {
    width: 48rpx;
    height: 48rpx;
  }

  .mcht-right-line2 {
    color: #666;
    font-size: 22rpx;
    margin-top: 10rpx;
  }
</style>
